import React, { useEffect, useState } from 'react'
import { Table, Space, Input } from 'antd';
import axios from '../../utils/request'
import { Modal, Button } from 'antd';


export default function Drug() {

    const [list, setList] = useState([])
    useEffect(() => {
        drugList()
    }, [])
    const drugList = () => {
        axios.post('/api/drug').then(res => {
            // console.log(res);
            setList([...res.data.data])
        })
    }

    const drugdel = (id) => {
        axios.post('/api/drugdel', { id }).then(res => {
            // console.log(res);
            drugList()
        })
    }

    const { Search } = Input;
    const onSearch = (value) => {
        axios.post('/api/drugsearch', { value }).then(res => {
            // console.log(res);
            setList([...res.data.data])
        })
    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: id => <a>{id}</a>,
        },
        {
            title: '药名',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '药价/元',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '类型',
            dataIndex: 'style',
            key: 'style',
        },
        {
            title: '药房',
            dataIndex: 'yaofang',
            key: 'yaofang',
        },
        {
            title: '规格',
            dataIndex: 'guige',
            key: 'guige',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => { drugdel(record.id) }}>删除</a>
                    <a onClick={() => { drugset(record) }}>编辑</a>
                </Space>
            ),
        },
    ];


    const [isModalVisible, setIsModalVisible] = useState(false);
    const [show, setshow] = useState(false)
    const [title1, settitle1] = useState([])
    const [price1, setprice1] = useState([])
    const [guige1, setguige1] = useState([])
    const [id1, setid1] = useState([])

    const title = (e) => {
        settitle1(e.target.value)
    }
    const price = (e) => {
        setprice1(e.target.value)
    }
    const guige = (e) => {
        setguige1(e.target.value)
    }

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        if (show === true) {
            axios.post('/api/drugset', { title1, price1, guige1, id1 }).then(res => {
                // console.log(res);
                drugList()
            })
        } else if (show === false) {
            axios.post('/api/drugadd', { title1, price1, guige1 }).then(res => {
                // console.log(res);
                drugList()
            })
        }
        clear()
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };


    const drugset = (record) => {
        setIsModalVisible(true)
        setshow(true)
        settitle1(record.title)
        setprice1(record.price)
        setguige1(record.guige)
        setid1(record.id)
    }

    const clear = () => {
        setIsModalVisible(false)
        settitle1('')
        setprice1('')
        setguige1('')
        setid1(0)
    }

    return (
        <div className='wrapper'>
            <div className="add">
                <Button type="primary" onClick={showModal}>
                    新建
                </Button>
                <Modal title="请输入" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>标题:<input type="text" value={title1} onChange={(e) => { title(e) }} /></p>
                    <p>价格:<input type="text" value={price1} onChange={(e) => { price(e) }} /></p>
                    <p>规格:<input type="text" value={guige1} onChange={(e) => { guige(e) }} /></p>
                </Modal>
            </div>
            <Search placeholder="请输入药名" onSearch={onSearch} style={{ width: 200 }} />
            <Table columns={columns} dataSource={list} />
        </div>
    )
}
